/**
* @author: mayabo
* @date: 2021-11-02
* @description: 人员管理
*/
<template>
  <div class="default-wrap">
    <div class="content-title">
      <TitleCard title="总人数" :count="NUmberInfo.one || 0" />
      <TitleCard title="部门主管" :count="NUmberInfo.two || 0" />
      <TitleCard title="区域主管" :count="NUmberInfo.three || 0" />
      <TitleCard title="区域工作人员" :count="NUmberInfo.four || 0" />
    </div>
    <div class="content-search">
      <div class="search-select">
        <!-- <Input v-model="search.name" placeholder="名称"></Input>
        <Select v-model="search.value" placeholder="状态">
          <Option v-for="item in list" :value="item.value" :key="item">{{
            item.label
          }}</Option>
        </Select>
        <Button type="primary" icon="ios-search"></Button> -->
      </div>
      <div class="search-btn">
        <Button type="primary" @click="openAddUserModel()">新增角色</Button>
        <Button type="primary" @click="openRoleModel()">配置权限</Button>
        <Dropdown style="margin-left: 8px" @on-click="onDropClick">
          <Button type="primary">
            更多
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <Dropdown-menu slot="list">
            <Dropdown-item name="upload">批量导入</Dropdown-item>
          </Dropdown-menu>
        </Dropdown>
      </div>
    </div>

    <div class="content-table">
      <Table
        max-height="600"
        @on-select="onChangeSelect"
        border
        :columns="columns"
        :data="tableData"
      ></Table>
    </div>
    <div class="content-page">
      <div class="page-btn">
        <Button type="primary" :loading="exportLoading" @click="exportToExcel()"
          >数据导出</Button
        >
      </div>
      <!-- <Page
        :total="tableData.length"
        :page-size="search.pageSize"
        :current="search.pageIndex"
        @on-change="changepage"
        @on-page-size-change="_nowPageSize"
        show-elevator
      ></Page> -->
    </div>
    <!-- 新增编辑弹窗 -->
    <rolesMedal
      :title="modalTtile"
      :visible="modalVisible"
      :roleInfo="rolesDetails"
      :modelType="modalType"
      @onCloseRolesModel="onCloseRolesModel"
    />
  </div>
</template>

<script type="text/jsx">
import * as api from '@/api/alarm'
import {
  getRolesList,
  getNumberList,
  deleteRoles
} from '@/api/system/roles.js'
import TitleCard from './components/TitleCard'
import rolesMedal from './components/rolesModal'
import excel from '@/libs/excel'
export default {
  name: 'Management',
  components: {
    TitleCard,
    rolesMedal
  },
  data () {
    let that = this
    return {
      exportLoading: false,
      search: {
        pageSize: 10,
        pageIndex: 1
      },
      list: [],

      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '名称',
          key: 'roleName',
          align: 'center'
        },
        {
          title: '等级',
          key: 'alarmLevelName',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 140,
          align: 'center',
          render (c, { row, column, index }) {
            return (
              <div class="table-button-wrap">
                <span
                  class="table-btn"
                  onClick={() => that.updateRolesInfo(row)}
                >
                  编辑
                </span>
                <span
                  class="table-btn"
                  onClick={() => that.deleteRolesInfo(row.id)}
                >
                  删除
                </span>
              </div>
            )
          }
        }
      ],
      tableData: [],
      alarmLevelList: [],
      alarmTypeList: [],
      NUmberInfo: null,
      modalTtile: '新增角色',
      modalVisible: false,
      modalType: 'add',
      rolesDetails: {},
      selectList: []
    }
  },
  created () {
    // 获取预警等级
    api.getAlarmLevel().then((response) => {
      this.alarmLevelList = response.data
    })

    // 获取预警类型
    api.getAlarmType().then((response) => {
      console.log(response)
      this.alarmTypeList = response.data
    })

    this.getRoleList()
    // 获取顶部信息
    this.getNumberList()
  },
  methods: {
    // 新增角色打开弹窗
    openAddUserModel () {
      this.modalVisible = true
      this.modalTtile = '新增角色'
      this.modalType = 'add'
    },
    // 编辑角色打开窗口
    updateRolesInfo (row) {
      console.log(row)
      this.rolesDetails = row
      this.modalVisible = true
      this.modalTtile = '编辑角色'
      this.modalType = 'edit'
    },
    // 关闭窗口
    onCloseRolesModel () {
      this.modalVisible = false
      this.getRoleList()
    },
    // 获取角色列表
    getRoleList () {
      let that = this
      getRolesList(this.search).then((res) => {
        if (res.status === 200) {
          that.tableData = []
          that.resetDataList(res.data)
        } else {
          that.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    // 重构数据
    resetDataList (data) {
      if (!data && data.length === 0) {
        this.tableData = []
        return false
      }
      if (data && data.length > 0) {
        let that = this
        data.map((item) => {
          let obj = {
            id: item.id,
            roleName: item.roleName,
            alarmLevelName: item.alarmLevel.alarmLevelName,
            alarM_Level_ID: item.alarmLevel.id
          }
          that.tableData.push(obj)
        })
      }
    },
    exportToExcel () {
      this.exportLoading = true
      getRolesList().then((response) => {
        let list = response.data.map((item) => {
          item.roleName = item.roleName
          item.alarmLevelName = item.alarmLevel.alarmLevelName
          return item
        })

        if (list.length) {
          const params = {
            title: ['名称', '等级'],
            key: [
              'roleName',
              'alarmLevelName'
            ],
            data: list,
            autoWidth: true,
            filename: `角色列表_${Date.now()}`
          }
          excel.export_array_to_excel(params)
        } else {
          this.$Message.info('暂无数据！')
        }
      })
        .finally(() => {
          this.exportLoading = false
        })
    },
    // 点击，切换页面
    changepage (index) {
      // 储存当前页
      this.search.pageIndex = index
    },
    // 每页显示的数据条数
    _nowPageSize (index) {
      // 实时获取当前需要显示的条数
      this.search.pageSize = index
    },
    onDropClick () {},
    // 获取顶部信息
    getNumberList () {
      let that = this
      getNumberList({ st: 2 }).then((res) => {
        if (res.status === 200) {
          that.NUmberInfo = res.data
        } else {
          that.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    // 删除角色
    deleteRolesInfo (id) {
      let that = this
      deleteRoles(id).then((res) => {
        if (res.data === -1) {
          return that.$Message.warning('删除失败，请联系管理员！')
        }
        if (res.status === 200) {
          that.$Message.success('删除成功')
          // 获取用户列表
          return that.getRoleList()
        }
        return that.$Message.warning('删除失败，请联系管理员！')
      })
    },
    onChangeSelect (selection) {
      this.selectList = selection
    },
    // 跳转配置权路由
    openRoleModel () {
      if (this.selectList.length === 0) {
        return this.$Message.warning('请选择用户')
      }
      if (this.selectList.length === 1) {
        let id = this.selectList[0].id
        return this.$router.push({
          path: '/system/roleConfig?id=' + id
        })
      }
      return this.$Message.warning('请选择一个用户')
    }
  }
}
</script>

<style lang="less" scoped>
@import "./styles/index.less";
</style>
